<template>
  <div class="app-container datasview">
    <div class="titleList">
      <dl>
        <dt style="font-size: 16px;">总视频素材数</dt>
        <dd>{{ views.videoCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">总音频素材数</dt>
        <dd>{{ views.audioCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">待审核素材数</dt>
        <dd>{{ views.auditCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">总播单数量</dt>
        <dd>{{ views.playlistCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">短视频总数</dt>
        <dd>{{ views.shortVideoCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">今日新增短视频数</dt>
        <dd>{{ views.newShortVideoCount }}</dd>
      </dl>
      <!-- <dl>
        <dt style="font-size: 16px;">昨日新增音频数</dt>
        <dd>{{ views.pre_audioCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">昨日新增待审核数</dt>
        <dd>{{ views.pre_auditCount }}</dd>
      </dl>
      <dl>
        <dt style="font-size: 16px;">昨日新增播单数量</dt>
        <dd>{{ views.pre_playlistCount }}</dd>
      </dl> -->

    </div>
    <div class="content">
      <div class="left">
        <h3>热门分类排行榜（TOP10）</h3>
        <div class="list">
          <p><span>分类名称</span><span>素材量</span></p>
          <p v-for="(item, index) in categoryTop" :key="index">
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </p>
        </div>

      </div>
      <div class="right">
        <h3>热门素材调用量排行榜（TOP10）</h3>
        <div class="list">
          <div v-show="hotTop.length==0" class="no_data">暂无数据</div>
          <table>
            <tr>
              <th>素材名称</th>
              <th>一级分类</th>
              <th>二级分类</th>
              <th>调用pv</th>
            </tr>
            <tr v-for="(item, index) in hotTop" :key="index">
              <td>{{ item.title }}</td>
              <td>
                <!-- <span v-for="(fir, index) in item.cateOneList" :key="index">{{ fir.name }},</span> -->
                <span>{{ item.cateOneText }}</span>
              </td>
              <td>
                <!-- <span v-for="(sec, index) in item.cateTwoList" :key="index">{{ sec.name }},</span> -->
                <span>{{ item.cateTwoText }}</span>
              </td>
              <td>{{ item.pv }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import BackToTop from '../../../components/BackToTop'
import Pagination from '../../../components/Pagination'
import ObjectUtil from '../../../utils/object-util'
import { apiViews } from '../../../api/datasview/index'
// import RadioProgramPlayList from './play_list'
// import RadioProgramCard from './programCard'

export default {
  name: 'RadioProgramList',
  components: { BackToTop, Pagination },
  mixins: [
  ],
  data() {
    return {
      // 数据总计
      views: {
        videoCount: 0,
        audioCount: 0,
        auditCount: 0,
        playlistCount: 0,
        shortVideoCount: 0,
        newShortVideoCount:0,
        // pre_audioCount: 0,
        // pre_auditCount: 0,
        // pre_playlistCount: 0
      },
      // 分类排行榜
      categoryTop: [],
      // 调用量排行榜
      hotTop: []
    }
  },
  created() {
    this.getviews()
    // this.getviews({ days: 0 })
    this.getcategoryTop()
    this.gethotTop()
  },
  methods: {
    // 统计数据
    getviews(query) {
      apiViews.info(query || '').then(res => {
        if (res.data.resp_code == 0) {
          const result = res.data.datas
          if (!query) {
            this.views.videoCount = result.videoCount
            this.views.audioCount = result.audioCount
            this.views.auditCount = result.auditCount
            this.views.playlistCount = result.playlistCount
            this.views.shortVideoCount = result.shortVideoCount
            this.views.newShortVideoCount = result.newShortVideoCount
          } else {
            // this.views.shortVideoCount = result.shortVideoCount
            // this.views.pre_audioCount = result.audioCount
            // this.views.pre_auditCount = result.auditCount
            // this.views.pre_playlistCount = result.playlistCount
          }
        }
      }).catch(err => console.log(err))
    },
    // 分类排行
    getcategoryTop() {
      const query = {
        page: 1,
        limit: 10
      }
      apiViews.categoryTop(query).then(res => {
        if (res.data.resp_code === 0) {
          this.categoryTop = res.data.datas.list
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(err => console.log(err))
    },
    // 调用量排行
    gethotTop() {
      const query = {
        page: 1,
        limit: 10
      }
      apiViews.hotTop(query).then(res => {
        if (res.data.resp_code === 0) {
          this.hotTop = res.data.datas.list
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(err => console.log(err))
    }
  }
}
</script>

<style lang='scss' scoped>
  .datasview{
    .titleList{
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0px 0px 10px 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        dl{
            width: 15.66%;
            height: 105px;
            margin:20px 1% 10px 0;
            // border-color: rgba(121, 121, 121, 1);
            // background-color: rgba(242, 242, 242, 1);
            box-sizing: border-box;
            border: solid 1px rgba(242, 242, 242, 1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            dt{
                font-weight: 900;
                font-size: 18px;
                color: #333333;
                margin: 20px 0 10px;
                box-sizing: border-box;
                text-align: center;
            }
            dd{
              color: #575757;
               font-weight: 500;
               font-size: 16px;
               text-align: center;
            }
        }
    }
    .content{
      width:100%;
      height:auto;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      box-sizing: border-box;
      padding:10px 10px 10px 20px;
      h3{
        margin-bottom: 10px;
      }
      .left,.right{
        // border:1px solid #ccc;
        // flex: 1;
        // margin:0 10px;
        padding:15px;
        float: left;
        width:30%;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .left{
        // width:30%;
        margin-right: 10px;
        .list{
          p{
            overflow: hidden;
            padding:10px 6px;
            & span:first-child{
              float: left;
            }
            & span:last-child{
              float: right;
            }
            // display: flex;
            // justify-content: space-around;
          }
        }
      }
      .right{
        // float: right;
        width:60%;
        flex:1;
          position: relative;
        .list{
          width:100%;
          .no_data{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            font-size: 20px;
            color:rgba(0,0,0,.4);
          }
          table{
            width:100%;
            tr{
              margin-bottom: 10px;
            }
            td{
              text-align: center;
              padding:10px 0;
            }
          }
        }
      }
    }
  }
</style>
